<template>
  <div>
    <van-pull-refresh v-model="reFreshing" @refresh="onRefresh">
      <!-- 底部加载更多的组件 -->
      <!-- v-model  是否处于加载状态，加载过程中不触发load事件-->
      <!-- finished 是否已加载完成，加载完成后不再触发load事件-->
      <!-- immediate-check 是否在初始化时立即执行滚动位置检查 默认为true-->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <!-- 文章内容列表的封装 -->
        <!-- 使用组件 -->
        <!-- 循环文章列表，铺设文章条数列表 -->
        <!-- 将每条文章对象传给子组件，在子组件内铺设每条文章的结构 -->
        <!-- isShow 控制反馈按钮的显示 -->
        <ArticleItem
          v-for="obj in articleList"
          :key="obj.art_id"
          :artObj="obj"
          :isShow="true"
          @click.native="toArtDetailFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
    <!-- 反馈面板 -->
    <!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
  </div>
</template>

<script>
// 8. 文章item标题盒子里图片的铺设
// 分两种情况：一张图片 或者多张图片
// 判断一张图片时，准备img标签，放在title-box盒子里面
// 多张图片时，img标签放在和title-box并列的位置，每张图片使用div包裹
// 循环div生成多张图片
// 9. 时间处理(多久以前)
// 实现思路： 使用当前的时间减去文章发布的时间，通过判断，返回多久以前
// 在dayjs官网查询文档
// 引入到组件内，找到相关方法(到指定时间)
// 封装dateFormat方法，进行时间处理
// 在标签内直接调用方法
// 10. 底部加载更多组件使用*********
// 原理：可以滚动的高度- 容器的高度 = 卷去的高度
// 引入在ArticleList中使用list组件
// 复制代码标签，将article-item包裹起来
// 当滚动到底部后，触发load加载事件，v-model绑定是否处于加载状态
// finished表示是否加载完成，加载完成其值为true，并显示加载完成的文字
// immediate-check 是否在初始化时立即执行滚动位置检查，默认为true
// 小bug：tabs和van-list搭配使用，在切换tab栏时，会触发页面的滚动事件，但是mmediate-check无法监听滚动事件的监听效果，所以下一页触发还是两次请求事件，引发控制台报错
// 解决方案，onload事件中判断文章列表是否为空，如果不为空再发送请求，获取数据
// 11. 触底之后，发送请求，获取下一页数据
// 在ArticleList中准备下一页文章的发布时间变量 nextTime
// 接口文档传入timestamp时间戳
// 初始化请求数据完成，将返回结果给nextTime赋值
//  在onLoad方法中，重新传入文章发布时间，重新获取数据，
// 将新获取的文章列表添加合并到文章列表中，将Loading改为false，保证下次触底还能触发load事件
// 判断如果获取数据为空，finished改为true，表示加载完成
// 12. 下拉刷新页面功能
// 补充：移动端touch事件(touchstart,touchmove,touthend)
// 原理：获取手指在屏幕的坐标点，移动后手指坐标点，手指离开屏幕触发tpuchend，获取手指偏移量，修改标签的位移量(加c3动画)
// 使用组件PullRefresh，复制代码，包裹在list外面
// 定义变量reFreshing变量，表示加载状态
// 在onRefresh事件中，清空数据列表，重新发送请求
// 请求完成，将reFresshing改为false
// 13. 文章列表的反馈面板
// 使用ActionSheet组件，设置点击关闭按钮后弹出的反馈面板
// 将反馈面板放在home/index.vue(防止循环生成多个反馈面板)
// 复制代码，准备变量,准备事件
// 使用vuex技术，设置全局变量和全局方法********
// 在index.vue中使用变量和映射方法并调用
// 14. 二级反馈面板的设置
//  将一级和二级反馈面板的展示内容设置为vuex全局变量
// 设置取消选项文字 cancel-text="取消"
// 将取消项设置为变量，点击反馈内容，更换actions里的数据，将取消变量改为返回
// 点击二级反馈面板中的返回，切换actions数据，更换取消文字，让面板显示
// 15. 点击不感兴趣功能
// 准备文章id，封装接口发送请求(不喜欢文章)
// 请求成功，调用关闭反馈面板函数
// 16. 举报功能
// 判断点击面板内容为其他，则发送请求(在api里封装方法)
// 发送请求后，关闭反馈面板
// 17. 响应拦截器
// 响应失败，如果状态码为401，则清除token，跳转登录页
// 18. 请求拦截器
// 请求成功，添加请求头
import ArticleItem from '@/components/ArticleItem'
import { getArticleListApi } from '@/api'
export default {
  props: {
    channleId: Number
  },
  data () {
    return {
      articleList: [],
      list: [],
      loading: false, // 是否处于加载状态,加载完成自动设置为true
      finished: false, // 是否加载完成
      nextTime: new Date(), // 下一页的时间
      reFreshing: false
    }
  },
  // 初始化完成，发送请求获取文章列表，将文章列表和下一页文章的发布时间赋值给内部变量
  created () {
    this.getArticleListFn()
  },
  methods: {
    async getArticleListFn () {
      const re = await getArticleListApi({
        channel_id: this.channleId,
        timestamp: this.nextTime
      })
      // console.log(re)// 将获取的文章列表合并到当前文章列表
      this.articleList = [...this.articleList, ...re.data.data.results]
      // 判断如果下一页时间为null，则表示加载结束
      // if (re.data.data.pre_timestamp === null) {
      if (re.data?.data?.pre_timestamp === null) {
        this.finished = true
        // 否则把请求的下一页时间赋值给内部变量
      } else {
        this.nextTime = re.data.data.pre_timestamp
      }

      // 数据处理完成，更改loading状态为false，表示没有处于加载状态，保证下一次onload事件可以触发
      this.loading = false
      setTimeout(() => {
        this.reFreshing = false
      }, 1000)
    },
    // 触底之后,触发事件，发送请求，传入频道id和下一页发布时间，获取下一页的文章列表
    onLoad () {
      // 如果文章列表有数据，再发送请求
      if (this.articleList.length > 0) {
        this.getArticleListFn()
      }
    },
    // 顶部刷新，将原文章列表清空，
    onRefresh () {
      this.articleList = []
      this.nextTime = new Date()
      this.getArticleListFn()
      this.isLoading = false // 获取完成顶部加载状态关闭
    },
    // 点击文章，进入详情页面
    toArtDetailFn (art_id) {
      this.$router.push({
        path: '/article_detail',
        query: {
          artId: art_id
        }
      })
    }
  },
  // 注册
  components: {
    ArticleItem
  }
}
</script>

<style></style>
